<template>
    <AntdConfirmModal title="新增用户" ref="userModalRef" width="700px" :keepSlot="false" @confirm="submitForm">
        <a-form :model="form" name="basic" :label-col="{ span: 8 }">
            <a-row>
                <a-col :span="12">
                    <a-form-item label="用户昵称" name="nickName" :rules="[{ required: true, message: '请输入用户昵称' }]">
                        <a-input v-model:value="form.nickName" placeholder="请输入用户昵称" maxlength="30" />
                    </a-form-item></a-col><a-col :span="12">
                    <a-form-item label="归属部门" name="deptId" :rules="[{ required: true, message: '请选择用户部门' }]">
                        <a-tree-select v-model:value="form.deptId" allow-clear :tree-data="deptStore.deptTree" :field-names="{
                            value: 'id',
                            label: 'deptName',
                            children: 'children',
                        }" placeholder="选择归属部门" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-item label="手机号码" name="mobile" :rules="[{ required: true, message: '请输入手机号码' }]">
                        <a-input v-model:value="form.mobile" placeholder="请输入手机号码" maxlength="11" />
                    </a-form-item></a-col><a-col :span="12">
                    <a-form-item label="邮箱" name="email" :rules="[{ required: true, message: '请输入邮箱' }]">
                        <a-input v-model:value="form.email" placeholder="请输入邮箱" maxlength="50" />
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-item label="用户账号" name="userName" :rules="[{ required: true, message: '请输入用户账号' }]">
                        <!-- fix 修改状态禁止修改账户 -->
                        <a-input :disabled="title == '修改用户'" v-model:value="form.userName" placeholder="请输入用户账号"
                            maxlength="30" />
                    </a-form-item>
                </a-col>
                <!-- <a-col :span="12">
                        <a-form-item label="用户密码" name="password" :rules="[{ required: true, message: '请输入用户密码' }]">
                            <a-input-password v-model:value="form.password" placeholder="请输入用户密码" maxlength="20" />
                        </a-form-item>
                    </a-col> -->
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-item label="用户性别" name="sex" :rules="[{ required: true, message: '请输入用户性别' }]">
                        <a-select v-model:value="form.sex" placeholder="请选择">
                            <a-select-option v-for="dict in sex_dict" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </a-select>
                    </a-form-item>
                </a-col>
                <!-- <a-col :span="12">
                        <a-form-item label="岗位" name="postId" :rules="[{ required: true, message: '请选择岗位' }]">
                            <a-select v-model:value="form.postId" placeholder="请选择" />
                            <a-select-option v-for="item in postOptions" :key="item.id" :label="item.postName"
                                :value="item.id" :disabled="item.status == 0"></a-select-option>
                        </a-form-item>
                    </a-col> -->
            </a-row>
            <a-form-item :label-col="{ span: 4 }" label="备注">
                <a-textarea v-model:value="form.remark" />
            </a-form-item>
        </a-form>
    </AntdConfirmModal>
</template>
<script setup>
import {createOne} from '@/module/org/api/user';
import useApp from '@/hooks';
const { $ } = useApp();
const userModalRef = ref(null);
import useDeptStore from '@/module/org/store/dept';
const deptStore = useDeptStore();
import { status_dict, sex_dict } from '@/constant/dict'
const form = ref({
    userId: undefined,
    deptId: undefined,
    deptName: undefined,
    userName: undefined,
    nickName: undefined,
    password: undefined,
    mobile: undefined,
    email: undefined,
    sex: undefined,
    status: 1,
    remark: undefined,
    postIds: [],
    roleIds: [],
})
$.on('create-user', res => {
    userModalRef.value.openModal();
})
/** 提交按钮 */
function submitForm() {
    createOne(form.value).then(res => {
        console.log(res)
        $.showToast({
            title: '创建成功',
            icon: 'success'
        })
        $.emit('fresh-user',null);
        userModalRef.value.closeModal()
    })
}
</script>